<template>
  <view class="detail-wrap">
    <view class="swiper-wrap">
      <u-swiper class="titck-swiper" :list="imgArr"></u-swiper>
    </view>

    <view class="price-floor">
      <view class="price-box">
        <text class="unit">￥</text>
        <view class="price">{{ ticketInfo.ticket_price / 100 }} 起</view>
      </view>
      <view class="times">{{ ticketInfo.ticket_times }} 次</view>
    </view>

    <view class="titck-wrap">
      <view class="title">{{ ticketInfo.template_title }}</view>
      <view class="desc">{{ ticketInfo.template_desc }}</view>
      <view class="titck-start"
        >有效期：{{ ticketInfo.start_date }} 至 {{ ticketInfo.end_date }}</view
      >
      <view class="data-wrap" v-show="ticketInfo.one_day == 1">
        <view class="title">选择入场日期：</view>
        <view class="prebook" v-if="show" @click="handleShowCalendar">
          <image v-if="showIcon" src="@/static/img/calendar.png" />
          <view v-else class="showDate">{{ specified_date }}</view>
        </view>
      </view>
      <!-- 场次 -->
      <view class="sessions">
        <view class="sessions-title">选择场次:</view>
        <view
          class="sessions-con"
          v-for="(item, index) in sessions"
          :key="index"
        >
          <view
            :class="[
              'sessions-item',
              index == activeSessionsIndex ? 'sessions-item-active' : '',
            ]"
            @click="selectSessions(item, index)"
          >
            <view class="start_time"
              >{{ item.start_time }} - {{ item.end_time }}</view
            >
            <view class="sessions-price">￥{{ item.ticket_price / 100 }}</view>
          </view>
        </view>
      </view>
      <!-- 日历弹窗 -->
      <u-calendar
        :show="showCalenDar"
        color="#d5ad57"
        :mode="mode"
        :minDate="ticketInfo.start_date"
        :maxDate="ticketInfo.end_date"
        :closeOnClickOverlay="true"
        :monthNum="monthNum"
        @close="handleCalendarClose"
        @confirm="handleConfirm"
      ></u-calendar>
    </view>
    <view class="ticket-detail-btn-wrap">
      <view
        class="ticket-detail-btn"
        v-if="ticketInfo.one_day == 1"
        @tap="handleBuy"
      >
        <view class="ticket_price">￥{{ ticket_price / 100 }}</view>
        <view class="btn">购买</view>
      </view>
      <view class="ticket-detail-btn" v-else @tap="handleBuy">
        <view class="btn">免费领取</view>
      </view>
    </view>
  </view>
  <!--  <view class="ticket-detail-comment-wrap">
      <view class="ticket-detail-comment-item">使用说明:</view>
      <view class="ticket-detail-comment-item"
        >1、本卡不记名使用，购买成功后请前往前台扫核销码入场;</view
      >
      <view class="ticket-detail-comment-item"
        >2、有效期从办卡日起，在游泳馆开放时间内使用，闭馆时间以通知为准;</view
      >
      <view class="ticket-detail-comment-item">3、使用时间:16:00-22: 00;</view>
      <view class="ticket-detail-comment-item"
        >4、由于天气影响等非主观原因暂停开放的不延期;</view
      >
      <view class="ticket-detail-comment-item"
        >5、本卡办理成功后，支持退费;</view
      >
      <view class="ticket-detail-comment-item"
        >6、本卡当年有效，请在有效期内使用，逾期无效;</view
      >
      <view class="ticket-detail-comment-item"
        >7、在法律范围内本场馆保留最终解释权。</view
      >
    </view> -->
</template>

<script>
import { request, requestData } from '@/utils/http.js'
export default {
  name: 'ticketDetail',
  data() {
    return {
      site_code: '',
      template_id: '',
      ticketInfo: {},
      sessions: [],
      session_id: '',
      ticket_price: '',
      imgArr: [
        'https://ya30images.hbwlife.com/site/17001-ticket-1.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
      ],
      show: false,
      showCalenDar: false,
      showIcon: true,
      mode: 'single',
      specified_date: '',
      monthNum: 3,
      activeSessionsIndex: 0,
    }
  },
  onLoad(option) {
    if (option && option.id) {
      console.log(option.id)
      this.template_id = option.id
    }
  },
  onShow: function () {
    this.ticketTemplateInfo()
  },
  methods: {

    ticketTemplateInfo() {
      request('/common/ticket/template/info', {
        template_id: this.template_id,
        with_session: 1,
      })
        .then((res) => {
          this.ticketInfo = res?.datas
          let result = JSON.parse(JSON.stringify(this.ticketInfo))
          result.start_date = result.start_date + ' 00:00:00'
          result.end_date = result.end_date + ' 00:00:00'
          this.monthNum =
            new Date(result.end_date).getMonth() -
            new Date(result.start_date).getMonth() +
            1

          if (
            new Date(result.end_date).getTime() >
              new Date(result.start_date).getTime() &&
            +result.ticket_times === 1
          ) {
            this.show = true
          }

          /* 场次 */
          this.sessions = JSON.parse(JSON.stringify(this.ticketInfo.sessions))
          this.ticket_price = this.sessions[0].ticket_price //初始展示
          this.session_id = this.sessions[0].session_id //初始展示
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // 打开日历弹窗
    handleShowCalendar() {
      this.showCalenDar = true
    },

    // 关闭日历弹窗
    handleCalendarClose() {
      this.showCalenDar = false
    },

    // 日历选择
    handleConfirm(e) {
      this.showCalenDar = false
      this.specified_date = e[0]
      this.showIcon = false
      //console.log(this.showDate)
      //console.log(this.specified_date)
    },

    /* 选择场次 */
    selectSessions(item, index) {
      this.session_id = item.session_id
      this.ticket_price = item.ticket_price
      this.activeSessionsIndex = index
    },

    //支付
    handleBuy() {
      console.log(this.session_id)
      console.log(this.specified_date)
      let user_id = uni.getStorageSync('user_id')
      if (!user_id) {
        uni.showToast({
          title: '请先绑定手机号',
          icon: 'none',
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/loginPhone/loginPhone',
          })
        }, 2000)
      }else if(this.specified_date == ''){
        uni.showToast({
          title: '请先选择入场日期',
          icon: 'none',
        })
      } else {
        request('/user/ticket/buy/wx', {
          session_id: this.session_id,
          specified_date: this.specified_date,
        })
          .then((res) => {
            if (res.code == 0) {
              uni.removeStorageSync('appId')
              uni.removeStorageSync('timeStamp')
              uni.removeStorageSync('nonceStr')
              uni.removeStorageSync('package')
              uni.removeStorageSync('signType')
              uni.removeStorageSync('paySign')
              uni.setStorageSync('appId', res?.datas?.appId || '')
              uni.setStorageSync('timeStamp', res?.datas?.timeStamp || '')
              uni.setStorageSync('nonceStr', res?.datas?.nonceStr || '')
              uni.setStorageSync('package', res?.datas?.package || '')
              uni.setStorageSync('signType', res?.datas?.signType || '')
              uni.setStorageSync('paySign', res?.datas?.paySign || '')

              this.fnWxPay() //wx pay
            } else if (res.code == '-57026') {
              uni.showToast({
                title: '请先完善个人信息',
                icon: 'none',
              })
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pagesC/myInfo/myInfo',
                })
              }, 2000)
            } else if (res.code == '-57022') {
              uni.showToast({
                title: '请先上传人脸照片',
                icon: 'none',
              })
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pagesC/myInfo/myInfo',
                })
              }, 2000)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    fnWxPay() {
      uni.requestPayment({
        timeStamp: uni.getStorageSync('timeStamp'), //时间戳
        nonceStr: uni.getStorageSync('nonceStr'), //随机字符串
        package: uni.getStorageSync('package'), //prepay_id
        signType: uni.getStorageSync('signType'), //签名算法MD5
        paySign: uni.getStorageSync('paySign'), //签名
        success(res) {
          if (res.errMsg == 'requestPayment:ok') {
            uni.showToast({
              title: '支付成功！',
              icon: 'success',
            })
          } else {
            uni.showToast({
              title: '支付失败',
              icon: 'error',
            })
          }
        },
        fail(res) {
          uni.showToast({
            title: '取消支付',
            icon: 'error',
          })
        },
      })
    },
  },
}
</script>

<style lang="scss">
.detail-wrap {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  height: auto;
  padding-bottom: 100rpx;
  position: relative;
  box-sizing: border-box;
  background: #f7f7f8;
}

.swiper-wrap {
  width: 100%;
  height: 360rpx !important;
  box-sizing: border-box;
}

.titck-swiper {
  height: 100% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 更改u-swiper样式 */
::v-deep .u-swiper {
  height: 100% !important;
}

::v-deep .u-swiper__wrapper.data-v-6b019429 {
  height: 100% !important;
}

::v-deep .u-swiper__wrapper__item__wrapper__image.data-v-6b019429 {
  height: 100% !important;
}

::v-deep .u-swiper__indicator data-v-6b019429 {
  bottom: 40rpx !important;
}

::v-deep .u-swiper__indicator-dot {
  width: 58rpx !important;
  height: 58rpx !important;
}
/*  */
.price-floor {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background: #d5ad57;
}
.price-floor .title {
  height: 80rpx;
  line-height: 80rpx;
}
.price-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 32rpx;
  box-sizing: border-box;
}

.price-floor .times {
  font-size: 32rpx;
}

.price-box .unit {
}
/*  */

.price-box .price {
  margin-left: 10rpx;
  font-size: 32rpx;
}

.titck-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 17rpx 24rpx;
  background-color: #fff;
  // margin-top: 20rpx;
}

.titck-wrap .title {
  height: auto;
  line-height: 60rpx;
}
.titck-wrap .desc {
  height: auto;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #676a6d;
}
.titck-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 20rpx;
}
.data-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.data-wrap .prebook {
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-wrap .prebook image {
  width: 40rpx;
  height: 40rpx;
}
.sessions {
  margin-top: 30rpx;
  background: #fff;
}
.sessions-title {
  height: 60rpx;
  line-height: 60rpx;
}
.sessions-con {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}

.sessions-item {
  height: 70rpx;
  line-height: 70rpx;
  margin: 10rpx 0;
  background: #f7f7f8;
  border-radius: 15rpx;
  padding: 10rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.sessions-item-active {
  border: 1px solid #dccdab;
  background: #fff;
  //color: $global-color-golden;
}
.sessions-price {
  color: #d82a0e;
  font-weight: 500;
}


.ticket-detail-title-desc {
  margin-top: 20rpx;
  color: #d5ad57;
}

.ticket-detail-comment-wrap {
  width: 100%;
  height: auto;
  background-color: #fff;
  font-size: 24rpx;
  padding: 10rpx 15rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
}

.ticket-detail-comment-item {
  width: 100%;
  height: auto;
  margin-bottom: 10rpx;
}

.ticket-detail-btn-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ticket-detail-btn {
  box-sizing: border-box;
  border: none;
  width: 90%;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20rpx;
  color: #fff;
  font-size: 28rpx;
  font-weight: 400;
  background: linear-gradient(to right, #d5ad57, #cfb58a);
}
.ticket-detail-btn .ticket_price {
  margin-right: 30rpx;
  font-size: 36rpx;
}
.ticket-detail-btn-wrap .btn {
  font-size: 36rpx;
}
</style>
